<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=640,target-densitydpi=device-dpi,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name='author' content='网站建设：智杰科技'>
  <title></title>
  <meta name="keywords" content="">
  <meta name="description" content="">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet">
  <link href="css/public.css" rel="stylesheet" type="text/css" />
  <link href="css/content.css" rel="stylesheet" type="text/css" />
  <style>
    .detail-box{
      padding: 0;
    }
    .gray-bar{
      height: 81px;
      line-height: 81px;
      background: rgba(217,217,217,1);
      color: rgba(102,102,102,1);
      font-size: 34px;
      padding-left: 20px;
    }
    .desc-wrap{
      padding: 20px 30px;
      box-sizing: border-box;
    }
    .swiper-btn{
      position: absolute;
      top: 50%;
      margin-top: -32px;
      height: 64px;
      line-height: 64px;
      width: 32px;
      text-align: center;
      color: #fff;
      font-size: 30px;
      z-index: 9;
      background: rgba(0,0,0,0.5);
    }
    .prev-btn{
      left: 0;
    }
    .next-btn{
      right: 0;
    }
    .pre-btn .iconfont:before{
      content: "\e6b0";
    }
    .next-btn .iconfont:before{
      content: "\e6af";
    }
    .img-box{
      position: relative;
      padding-bottom: 100%;
    }
    .img-box img{
      width: 100%;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  </style>
</head>

<body>
  <header id="publicNav"></header>
  <div class="main-wrap">
    <h6 class="top-info-box">新闻资讯</h6>
    <div class="detail-box">
      <p class="title"></p>
      <div class="swiper-container">
        <div class="swiper-wrapper" id="productBanner">
        </div>
        <a class="pre-btn swiper-btn">
          <span class="iconfont"></span>
        </a>
        <a class="next-btn swiper-btn">
          <span class="iconfont"></span>
        </a>
      </div>
      <p class="gray-bar">概要信息：</p>
      <p class="desc-wrap"></p>
      <p class="gray-bar">个性化您的办公室</p>
      <div id="newsDetailBox"></div>
      <div class="btn-box clearfix">
        <a id="prevNewsBtn" class="btn-item pre fl">
          <span class="fr">上一篇：</span>
          <p></p>
          <i class="iconfont"></i>
        </a>
        <a id="nextNewsBtn" class="btn-item next fr">
          <span class="fl">下一篇：</span>
          <p></p>
          <i class="iconfont"></i>
        </a>
      </div>
    </div>
  </div>
  <div id="publicTool"></div>
  <script src="js/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
  <script src="js/public.js"></script>
  <script>
    function getDetail () {
			var id = getQueryString('id')
			if (!id) {
				alert('产品不存在！')
				window.location.href = 'index.html'
			}
			$.ajax({
				type: 'POST',
				url: ajaxUrlObj['GET_PRODUCT_DETAIL'],
				data: {id:id},
				success: function(rep){
          console.log(rep)
          if (typeof rep === 'string') {
						rep = JSON.parse(rep)
					}
					if (rep.code == 1){
            rep = JSON.parse(rep.data)
						var data = rep.data ? rep.data : rep
            var $content = $("#newsDetailBox")
            $(".title").html(data.productName)
            $(".desc-wrap").html(data.productDescribe)
            var str = ''
            for(var i =0,l =data.productImageList.length;i<l;i++){
              str+='<div class="swiper-slide"><div class="img-box"><img src="'+host+data.productImageList[i].imageUrl+'"></div></div>'
            }
            $("#productBanner").html(str)
            new Swiper('.swiper-container', {
              autoplay : 5000,
              spaceBetween: 0,
              loop: true,
              prevButton:'.prv-btn',
              nextButton:'.next-btn', 
            });
						$content.html(data.productDetailed)
						if (rep.nextPage > 0 ) {
							$("#nextNewsBtn").attr("href",'new_detail.html?id='+rep.nextPage).find("p").html(rep.nextName)
						} else {
							$("#nextNewsBtn").hide()
						}
						if (rep.lastPage > 0 ) {
							$("#prevNewsBtn").attr("href",'new_detail.html?id='+rep.lastPage).find("p").html(rep.lastName)
						} else {
							$("#prevNewsBtn").hide()
            }
            if (data.seo) {
							$("title").html(data.seo.title)
							$('meta[name="keywords"]').attr("content",data.seo.keyword)
							$('meta[name="description"]').attr("content",data.seo.descs)
						}
					}
				},
				error: function(error){
					console.log(error)
					errorCb && errorCb(error)
				}
			});
		}
		getDetail()
  </script>
</body>

</html>